<template>
  <div v-title="'首页分类 - 世外生活运营平台'" class="MkHomePageMgt">
    <mk-breadcrumb :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class="PublicListStyle ">

      <div class="searchDiv marginBottom-20">
        <el-cascader
          :props="options"
          :options="siteArr"
          v-model="siteSelect"
          placeholder="请选择站点"
          @change="handleChange">
        </el-cascader>
      </div>

      <template v-if="beforeSelect">
          <div style="padding:200px 0;background:#ffffff;text-align: center;color:#5e8282;font-size:14px;">请选择站点</div>
      </template>
      <template v-else>
        <div element-loading-text="" v-loading="loadingTab">
          <div style='padding:0 20px;background-color:white;height:61px;line-height:60px;'>
            <div style="overflow: hidden;border-bottom:1px solid #f0f3f6;padding:0 0 0 50px;">
              <div style='font-size:14px;color:#81939e;padding-left:10px;float:left;'>名称</div>
              <div style="font-size:14px;color:#81939e;padding-left:10px;float:right;width:300px;">排序</div>
              <div style='font-size:14px;color:#81939e;padding-left:10px;float:right;width:200px;'>是否显示</div>
              <div style='font-size:14px;color:#81939e;padding-left:10px;float:right;width:200px;'>类型</div>
            </div>
          </div>
          <el-row>
            <el-col :span='24' class='layoutStyle layoutStyle_left' style="padding-right:20px;padding-left:70px;">
              <el-scrollbar :wrapStyle="[{maxHeight:'730px'}]">
                <el-tree :data="dataArr" :props="defaultProps" node-key="id"
                         :default-expanded-keys="defaultKeys" :render-content='renderContent' @node-click="showDetail" :expand-on-click-node="false"></el-tree>
              </el-scrollbar>
            </el-col>
          </el-row>
        </div>
      </template>


      <!-- 添加-->
      <mk-add-home-page :showDialog='dialogVisible_add'  v-on:closeDialog='closeDialog_add' :parentObj="parentObj"></mk-add-home-page>

      <!--详情-->
      <mk-home-page-detail :showDialog='dialogVisible_detail'  v-on:closeDialog='closeDialog_detail' :currentObj="currentObj"></mk-home-page-detail>
    </div>
    </el-scrollbar>
  </div>

</template>

<script>
  import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
  import { mapState } from 'vuex'
  import homePageService from '../../../services/homePage'
  import MkAddHomePage from './MkAddHomePage.vue'
  import MkHomePageDetail from './MkHomePageDetail.vue'
  export default {
    name: 'MkHomePageMgt',
    components: {
      MkBreadcrumb,MkHomePageDetail,MkAddHomePage
    },
    computed:mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
      siteArr: state => {
        let arr = [];
        let data = state.site.siteTree;
        if(data.children){
          for(let i=0;i<data.children.length;i++) {
            let item = data.children[i];
            if(item.children && item.children.length>0) {
              arr.push(item);
            }
          }
        }
        return arr;
      }
    }),
    methods: {
      showDetail(data) {
        this.currentObj = data;
        this.dialogVisible_detail = true;
      },
      closeDialog_detail(type) {
        if(type) {
          this.loadData();
        }
        this.dialogVisible_detail = false;
      },
      closeDialog_add(type) {
        if(type) {
            this.loadData();
        }
        this.dialogVisible_add = false;
      },
      append(data,event) {
        event.cancelBubble = true;
        event.stopPropagation();
        this.parentObj = {id:data.id,name:data.name,siteId: this.searchCondition.siteId};
        this.dialogVisible_add = true;
      },
      aboutRecommend(data,event) {
        event.cancelBubble = true;
        event.stopPropagation();
        if(data.recommend) {
          homePageService.cancelRecommendServer({id:data.id},() => {
              this.$message.success('取消推荐成功');
              this.loadData();
          },() => {

          })
        }else{
          homePageService.recommendServer({id:data.id},() => {
            this.$message.success('推荐成功');
            this.loadData();
          },() => {

          })
        }
      },
      renderContent(h, { node, data, store }) {
        var isShow = data.status=='ENABLE'? 'hasCheck' : 'hasClose';
         var hasNoAdd = data.parentIdPath.length == 3? 'hasNoAdd' : '';
         var aboutRecommend = data.parentIdPath.length == 3? '' : 'noRecommend';
         var isRecommendStr = data.recommend ?'取消推荐': '推荐';
          return (<div style='width:100%'>
            <span style='font-size:14px;float:left;'>
              <span>{data.name}</span>
            </span>
            <span style="float: right; display:inline-block;width:150px;color:#3bc0c3;font-size:14px;">
              <span on-click={ () => this.append(data,event) }  style='padding:8.5px;' class='hoverColor' classname={hasNoAdd}>添加子类</span>
              <span on-click={ () => this.aboutRecommend(data,event) }  style='padding:8.5px;' class='hoverColor' classname={aboutRecommend}>{isRecommendStr}</span>
          </span>


               <span  style="float: right; display:inline-block;font-size:14px;width:115px;margin-right:30px;">
                {data.weight}
              </span>

            <span style="float: right; display:inline-block;color:#3bc0c3;font-size:14px;width:210px;" classname={isShow}>
              <i class='el-icon-check' style='padding:5 10px;color:#3bc0c3'  ></i>
              <i class='el-icon-close' style='padding:5 10px;color:#b6c2c9;'></i>
            </span>

          <span style="float: right; display:inline-block;font-size:14px;width:215px;">
          {data.appCategoryStatus=='Native'?'系统默认':'自定义'}
          </span>

        </div>);
      },
      handleChange() {
        this.beforeSelect =  false;
        this.searchCondition.siteId = this.siteSelect[1];
        this.loadData();
      },
      loadData() {
        this.loadingTab = true;
        homePageService.loadHomePageServer(this.searchCondition,data=>{
          this.dataArr=[data.data];
          var arr=[];
          for(var i=0;i<this.dataArr.length;i++) {
            arr.push(this.dataArr[i].id)
          }
          this.defaultKeys=arr;
          this.loadingTab = false;
        })
      },
      loadSite() {
        this.$store.dispatch('loadSiteTree',{fields:'id,name'});
      }
    },
    mounted: function() {
      this.loadSite();
    },
    data () {
      return {
        searchCondition: {
          fields:'id,name,appCategoryStatus,status,weight,link,image,children,parentName,parentId,parentIdPath,siteId,recommend,homeImage',
          siteId:'',
        },
        beforeSelect: true,
        options: {
          value: 'id',
          label:'name',
          children: 'children'
        },
        siteSelect: [],
        parentObj:{},
        currentObj: {},
        defaultKeys:[],
        dialogVisible_detail:false,
        dialogVisible_add: false,
        dataArr:[],
        loadingTab: false,
        defaultProps: {
          children: 'children',
          label: 'name',
        },
        breadcrumbData: {
          list:[
            {name:'运营管理',path: null, clickAble: false},
            {name: '首页分类',path: null, clickAble: false}
         ],
          returnData: {
            isReturn: false, path: null
          },
          iconName: 'operation-icon',
        }


      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  /*@import '../../../assets/style/main.less';*/
  .MkHomePageMgt{
    .el-scrollbar{
      width:100%;
    }
  [classname = noRecommend] {
    display: none;
  }
    [classname = hasNoAdd] {
      display: none;
    }
    [classname=hasCheck]{
      .el-icon-check{
        display: inline;
      }
      .el-icon-close{
        display: none;
      }
    }
    [classname=hasClose]{
      .el-icon-check{
        display: none;
      }
      .el-icon-close{
        display: inline;
      }
    }
    .hoverColor{
      &:hover{
        color:#18878a;
      }
    }
    .searchDiv{
      .el-cascader{
        width:360px;
        height:46px;
        .el-cascader__label{
          line-height: 46px;
        }
        .el-input{
          .el-input__inner{
            background-color: #fff;
            height:46px;

          }
        }
      }

    }
  }


</style>
